<template>
  <fks-dialog
    :visible="true"
    width="960px"
    class="people"
    @close="cancel"
  >
    <div slot="title">
      <i
        v-if="peopleType == 'add'"
        class="fks-icon-plus"
      />
      <i
        v-if="peopleType == 'edit'"
        class="fks-icon-edit"
      />
      <i
        v-if="peopleType == 'view'"
        class="fks-icon-view"
      />
      {{ title }}
    </div>
    <fks-form
      ref="Form"
      :model="form"
      :rules="rules"
      :disabled="peopleType == 'view'"
      label-width="85px"
    >
      <span class="label">{{ LANG.BASIC_INFO }}</span>
      <div style="display: flex; align-items: flex-start; margin-top: 24px">
        <div
          style="width: 50%"
          class="left-form"
        >
          <div style="margin-bottom: 35px">
            <!-- 姓名 -->
            <fks-form-item
              prop="userFullname"
              lead
              :label="LANG.USER_FULL_NAME"
            >
              <!-- 新增人员时显示 -->
              <fks-input
                v-if="peopleType == 'add'"
                v-model="form.userFullname"
                clearable
                maxlength="50"
                show-word-limit
              />
              <!-- 编辑 -->
              <fks-input
                v-if="peopleType != 'add'"
                v-model="form.userFullname"
                clearable
                maxlength="50"
                show-word-limit
              />
            </fks-form-item>
          </div>
          <!-- 用户名 -->
          <div style="margin-bottom: 35px">
            <fks-form-item
              prop="userName"
              :label="LANG.USERNAME"
              lead
            >
              <!-- 新增 -->
              <fks-input
                v-if="peopleType == 'add'"
                v-model="form.userName"
                clearable
                maxlength="50"
                show-word-limit
                @input="
                  form.userName = form.userName.replace(/[^a-z0-9_]/g, '')
                "
              />
              <!-- 编辑 -->
              <fks-input
                v-if="peopleType != 'add'"
                v-model="form.userName"
                clearable
                maxlength="50"
                show-word-limit
                :disabled="peopleType == 'edit'"
                @input="
                  form.userName = form.userName.replace(/[^a-z0-9_]/g, '')
                "
              />
            </fks-form-item>
          </div>
        </div>
        <div style="display: flex; width: 50%">
          <fks-form-item
            :label="LANG.PHOTO"
            class="photo"
          >
            <fks-upload
              v-if="peopleType != 'view'"
              class="avatar-uploader"
              :action="url"
              :with-credentials="true"
              :headers="{ 'Fawkes-Auth': accessToken }"
              :show-file-list="false"
              :data="g9s"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList"
              drag
            >
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
              >
              <i
                v-if="!imageUrl"
                class="fks-icon-picture-outline avatar-uploader-icon"
              />
              <span v-if="!imageUrl">{{ LANG.PHOTO_TIP }}</span>
            </fks-upload>
            <template v-if="peopleType == 'view'">
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar"
              >
              <img
                v-if="!imageUrl"
                :src="imageUrl"
                class="avatar"
              >
            </template>
          </fks-form-item>
        </div>
      </div>
      <!-- 性别 -->
      <fks-form-item
        lead
        :span="12"
        prop="sex"
        :label="LANG.SEX"
      >
        <fks-select
          v-model="form.sex"
          style="width: 100%"
          :placeholder="LANG.PLEASE_SELECT"
        >
          <fks-option
            :label="LANG.MALE"
            value="男"
          />
          <fks-option
            :label="LANG.FEMININITY"
            value="女"
          />
        </fks-select>
      </fks-form-item>
      <!-- 出生年月 -->
      <fks-form-item
        :span="12"
        prop="birthDay"
        :label="LANG.BIRTHDAY"
      >
        <div
          component-type="date"
          detail-component="true"
        >
          <fks-date-picker
            v-model="form.birthDay"
            align="center"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
            @change="getAge"
          />
        </div>
      </fks-form-item>
      <fks-form-item
        lead
        :span="12"
        prop="stature"
        :label="LANG.HEIGHT"
      >
        <fks-input
          v-model.number="form.stature"
          clearable
          class="unitItem"
          maxlength="10"
          oninput="value=value.replace(/[^\d.]/g,'')"
        >
          <template slot="append">
            <span style="font-size: 16px">cm</span>
          </template>
        </fks-input>
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="weight"
        :label="LANG.WEIGHT"
      >
        <fks-input
          v-model.number="form.weight"
          clearable
          class="unitItem"
          maxlength="10"
          oninput="value=value.replace(/[^0-9.]/g,'')"
        >
          <template slot="append">
            <span style="font-size: 16px">kg</span>
          </template>
        </fks-input>
      </fks-form-item>
      <!-- 国籍 -->
      <fks-form-item
        lead
        :span="12"
        prop="nationality"
        :label="LANG.NATIONALITY"
      >
        <fks-input
          v-model="form.nationality"
          clearable
          maxlength="10"
          show-word-limit
        />
      </fks-form-item>
      <!-- 民族 -->
      <fks-form-item
        :span="12"
        prop="nation"
        :label="LANG.NATION"
      >
        <fks-input
          v-model="form.nation"
          clearable
          maxlength="10"
          show-word-limit
        />
      </fks-form-item>
      <!-- 籍贯 -->
      <fks-form-item
        lead
        :span="12"
        prop="nativePlace"
        :label="LANG.NATIVE_PLACE"
      >
        <fks-input
          v-model="form.nativePlace"
          clearable
          :maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <!-- 政治面貌 -->
      <fks-form-item
        :span="12"
        prop="politics"
        :label="LANG.POLITICAL_STATUS"
      >
        <fks-select
          v-model="form.politics"
          style="width: 100%"
          :placeholder="LANG.PLEASE_SELECT"
        >
          <fks-option
            v-for="item in politicsType"
            :key="item.code"
            :label="item[$lang]"
            :value="item.code"
          />
        </fks-select>
      </fks-form-item>
      <!-- 学历 -->
      <fks-form-item
        lead
        :span="12"
        prop="education"
        :label="LANG.EDUCATION"
      >
        <fks-select
          v-model="form.education"
          style="width: 100%"
          :placeholder="LANG.PLEASE_SELECT"
        >
          <fks-option
            v-for="item in degreeType"
            :key="item.code"
            :label="item[$lang]"
            :value="item.code"
          />
        </fks-select>
      </fks-form-item>
      <!-- 婚姻状况 -->
      <fks-form-item
        :span="12"
        prop="marriageState"
        :label="LANG.MARITAL_STATUS"
      >
        <fks-select
          v-model="form.marriageState"
          style="width: 100%"
          :placeholder="LANG.PLEASE_SELECT"
        >
          <fks-option
            v-for="item in marriageType"
            :key="item.code"
            :label="item[$lang]"
            :value="item.code"
          />
        </fks-select>
      </fks-form-item>
      <!-- 证件类型 -->
      <fks-form-item
        lead
        :span="12"
        prop="idcardType"
        :label="LANG.DOCUMENT_TYPE"
        clearable
      >
        <fks-select
          v-model="form.idcardType"
          style="width: 100%"
          clearable
          :placeholder="LANG.PLEASE_SELECT"
          @change="idcardTypeChange"
        >
          <fks-option
            v-for="item in idcardType"
            :key="item.code"
            :label="item[$lang]"
            :value="item.code"
          />
        </fks-select>
      </fks-form-item>
      <!-- 证件号码 -->
      <fks-form-item
        :span="12"
        prop="idcardNumber"
        :label="LANG.ID_NUMBER"
      >
        <fks-input
          v-model="form.idcardNumber"
          clearable
          :maxlength="50"
          show-word-limit
          @change="idcardNumberChange"
        />
      </fks-form-item>
      <p class="label">
        {{ LANG.CONTACT_INFO }}
      </p>
      <!-- 手机号码 -->
      <fks-form-item
        lead
        :span="12"
        prop="phone"
        :label="LANG.PHONE"
        clearable
      >
        <fks-input
          v-model="form.phone"
          clearable
          maxlength="11"
          show-word-limit
        />
      </fks-form-item>
      <!-- 邮箱 -->
      <fks-form-item
        :span="12"
        prop="email"
        :label="LANG.EMAIL"
        clearable
      >
        <fks-input
          v-model="form.email"
          clearable
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <!-- 办公地点 -->
      <fks-form-item
        lead
        :span="12"
        prop="officeLocation"
        :label="LANG.OFFICE_LOCATION"
        clearable
      >
        <fks-input
          v-model="form.officeLocation"
          clearable
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <!-- 办公电话 -->
      <fks-form-item
        :span="12"
        prop="officePhone"
        :label="LANG.OFFICE_PHONE"
        clearable
      >
        <fks-input
          v-model="form.officePhone"
          clearable
          maxlength="20"
          show-word-limit
        />
      </fks-form-item>
      <!-- 紧急联系人 -->
      <fks-form-item
        lead
        :span="12"
        prop="emergencyName"
        :label="LANG.EMERGENCY_CONTACT"
        clearable
      >
        <fks-input
          v-model="form.emergencyName"
          clearable
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <!-- 紧急联系人电话 -->
      <fks-form-item
        :span="12"
        prop="emergencyPhone"
        :label="LANG.EMERGENCY_CONTACT_PHONE"
        clearable
      >
        <fks-input
          v-model="form.emergencyPhone"
          clearable
          maxlength="20"
          show-word-limit
        />
      </fks-form-item>
      <p class="label">
        {{ LANG.WORK_INFORMATION }}
      </p>
      <fks-form-item
        :label="LANG.DEPARTMENT"
        lead
        :span="12"
        prop="deptId"
      >
        <fks-org-selector
          url-path="/sys-user/orgs/tree"
          :dept-id.sync="form.deptId"
          :dept-name.sync="form.deptName"
          :params="{ portalId: portalId }"
          :multi-index="[0]"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="title"
        :label="LANG.DUTIES"
      >
        <fks-input
          v-model="form.title"
          clearable
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        lead
        :label="LANG.POSITION"
        prop="postList"
      >
        <fks-select
          v-model="form.postList"
          :multiple="true"
          filterable
          :placeholder="LANG.PLEASE_SELECT"
          style="width: 100%"
        >
          <fks-option
            v-for="item in post"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </fks-select>
      </fks-form-item>
      <fks-form-item
        :span="12"
        :label="LANG.ENTRY_TIME"
        prop="hiredate"
      >
        <fks-date-picker
          v-model="form.hiredate"
          :editable="false"
          clearable
          align="center"
          type="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%"
        />
      </fks-form-item>
      <fks-form-item
        :span="12"
        prop="workingSeniority"
        style="margin-bottom: 0"
        :label="LANG.WORKING_YEARS"
      >
        <fks-input
          v-model="form.workingSeniority"
          oninput="value=value.replace(/[^0-9.]/g,'')"
          maxlength="50"
          show-word-limit
        />
      </fks-form-item>
    </fks-form>
    <div slot="footer">
      <fks-button
        v-if="peopleType != 'view'"
        type="primary"
        :loading="peopleLoading"
        icon="fks-icon-check"
        @click="save"
      >
        <span style="margin-left: 4px">{{ LANG.SAVE }}</span>
      </fks-button>
    </div>
  </fks-dialog>
</template>
<script>
import { getAddData, getDeleteData } from '@/utils/array'
import * as User from '../api'
import * as stateTypes from '@/store/State/stateTypes'
import * as types from '@/store/Getter/getterTypes.js'
import { mapState } from 'vuex'
import { pwdEncrypt } from '@/utils/encryption/pwd'
export default {
  name: 'StaffInfo',
  props: {
    peopleData: {
      default() {
        return {
          userName: ''
        }
      }
    },
    peopleType: {
      type: String,
      default: 'add'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      g9s: {},
      fileList: [],
      peopleLoading: false,
      post: [], //岗位数据
      addPostIdList: [], //新增岗位id数组
      deletePostIdList: [], //删除岗位id数组
      addOrgNoList: [], //新增组织机构id数组
      deleteOrgNoList: [], //删除组织机构id数组
      addUserIdList: [],
      idCard: '',
      imageUrl: '', //图片的URL
      accessToken: this.$storage.get('access_token'),
      url: this.VUE_APP_UPLOAD_API, //代理api
      //搜索栏条件（用户名，手机号，邮箱）
      //新增用户、编辑用户弹窗 显隐
      rowData: {}, //编辑时，克隆原始数据
      diffData: {}, //差异数据，编辑修改保存时，只上传修改过的数据
      form: {}
    }
  },
  computed: {
    title() {
      switch (this.peopleType) {
        case 'add':
          return this.LANG.ADD
        case 'view':
          return this.LANG.VIEW
        default:
          return this.LANG.EDIT
      }
    },
    //验证规则
    rules() {
      return {
        deptId: [
          {
            required: true,
            message: this.LANG.DEPARTMENT_REQUIRED,
            trigger: 'change'
          }
        ],
        userFullname: [
          {
            required: this.peopleType == 'add' ? true : false,
            message: this.LANG.USERFULLNAME_NOT_EMPTY,
            trigger: 'change'
          }
        ],
        userName: [
          {
            required: this.peopleType == 'add' ? true : false,
            message: this.LANG.USERNAME_NOT_EMPTY,
            trigger: 'change'
          },

          {
            pattern: this.peopleType == 'add' ? /^[a-z][a-z0-9_]*$/g : '',
            message: this.LANG.PERSON_USERNAME_FORMAT
          }
        ],
        phone: [
          {
            required: true,
            message: this.LANG.PHONE_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^1[3456789]\d{9}$/g,
            message: this.LANG.FORMAT_ERROR
          }
        ],
        idcardType: [
          {
            required: this.form.idcardNumber ? true : false,
            message: this.LANG.DOCUMENT_TYPE_REQUIRED,
            trigger: 'change'
          }
        ],
        idcardNumber: [
          {
            required: this.idCard == '' ? false : true,
            message: this.LANG.IDCARD_NOT_EMPTY,
            trigger: 'change'
          },
          {
            pattern:
              this.idCard == 'IDCARD'
                ? /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/g
                : '',
            message: this.LANG.FORMAT_ERROR
          }
        ],
        email: [
          {
            required: true,
            message: this.LANG.EMAIL_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^[A-Za-z0-9_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g,
            message: this.LANG.FORMAT_ERROR
          }
        ]
      }
    },
    sex() {
      return this.$store.state.enum.sex
    },
    marriageType() {
      return this.$store.state.enum.marriageStates
    },
    idcardType() {
      return this.$store.state.enum.idcardType
    },
    degreeType() {
      return this.$store.state.enum.degreeType
    },
    politicsType() {
      return this.$store.state.enum.politicsType
    },
    portalId() {
      return this.$store.state.portal.id
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL]
    },
    ...mapState([stateTypes.ACCOUNT_CONFIG])
  },
  watch: {
    peopleData: {
      deep: true,
      immediate: true,
      handler(val) {
        if (this.peopleType != 'add') {
          this.form = JSON.parse(JSON.stringify(val))
          if (val.orgList) {
            if (val.orgList[0]) {
              this.$set(this.form, 'deptId', String(val.orgList[0].orgNo))
              this.$set(this.form, 'deptName', val.orgList[0].name)
            }
          }
          this.getPhoto(this.form)
          this.g9s.g9s = this.form.photoToken
        }
        this.rowData = JSON.parse(
          JSON.stringify(Object.assign({ deptId: '', deptName: '' }, this.form))
        )
      }
    }
  },
  mounted() {
    this.getpost()
  },
  methods: {
    //输入身份证后回调方法
    idcardNumberChange(value) {
      var cardPattern = /^.*([1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]).*$/ //身份证
      if (cardPattern.test(value)) {
        let birthDay = ''
        birthDay = this.getAnalysisIdCard(value, 1) + ' ' + '00:00:00'
        this.$set(this.form, 'birthDay', birthDay)
        this.$set(this.form, 'sex', this.getAnalysisIdCard(value, 2))
      }
    },
    //从身份证中获取生日、性别
    getAnalysisIdCard(card, num) {
      if (num == 1) {
        //获取出生日期
        let birth =
          card.substring(6, 10) +
          '-' +
          card.substring(10, 12) +
          '-' +
          card.substring(12, 14)
        return birth
      }
      if (num == 2) {
        //获取性别
        if (parseInt(card.substr(16, 1)) % 2 == 1) {
          //男
          return '男'
        } else {
          //女
          return '女'
        }
      }
      // if (num == 3) {
      //   //获取年龄
      //   var myDate = new Date()
      //   var month = myDate.getMonth() + 1
      //   var day = myDate.getDate()
      //   var age = myDate.getFullYear() - card.substring(6, 10) - 1
      //   if (
      //     card.substring(10, 12) < month ||
      //     (card.substring(10, 12) == month && card.substring(12, 14) <= day)
      //   ) {
      //     age++
      //   }
      //   return age
      // }
    },
    //证件类型切换后回调
    idcardTypeChange(value) {
      this.idCard = value
    },
    //获取岗位数据
    getpost() {
      User.getpost(this.portalId)
        .then((res) => {
          if (res.status && res.data) {
            res.data.forEach((post) => {
              this.post.push({ value: post.id, label: post.postName })
            })
          }
        })
        .catch(() => {
          this.post = []
        })
    },
    //关闭弹窗
    cancel() {
      this.$emit('update:visible', false)
    },
    //校验填入的出生日期合理性
    getAge(val) {
      let date1 = new Date()
      //获取当前时间下的完整年份(4位)
      let thisYear = date1.getFullYear()
      let bDate = new Date(val)
      //获取填写时间的完整年份(4位)
      let brith = bDate.getFullYear()
      let age = thisYear - brith
      if (age < 1) {
        this.$message.warning(this.LANG.BIRTHDAY_WARRING)
        this.form.birthDay = ''
      }
    },
    //编辑人员保存
    editSave() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          //判断是否修改过
          this.diffDataMethod()
          //修改过，则调用接口，提交修改,参数要带上用户名&id
          let params = Object.assign(
            {
              userName: this.form.userName,
              id: this.form.id,
              addPostIdList: this.addPostIdList,
              deletePostIdList: this.deletePostIdList,
              addOrgNoList: this.addOrgNoList,
              deleteOrgNoList: this.deleteOrgNoList
            },
            this.diffData
          )
          User.editUsers(params)
            .then((res) => {
              if (res.status) {
                this.cancel()
                //修改成功后，清除上次修改对象
                this.$message.success(this.LANG.EDIT_SUCCESS)
                this.$emit('searchUser')
              }
              this.clearData()
              this.peopleLoading = false
            })
            .catch((error) => {
              this.peopleLoading = false
            })
        } else {
          this.peopleLoading = false
        }
      })
    },
    //新增人员保存,当系统设置了默认密码时取系统配置处设置的默认密码，如果没有则为123456
    addSave() {
      this.$refs.Form.validate((valid) => {
        if (valid) {
          let copyForm = this.form
          let params = Object.assign(copyForm, {
            postIdList: this.form.postList,
            orgNoList: this.form.deptId.split(','),
            password:
              this.accountConfig.initialPassword && this.accountConfig
                ? pwdEncrypt(this.accountConfig.initialPassword)
                : pwdEncrypt('123456')
          })
          User.saveUser(params)
            .then((res) => {
              this.peopleLoading = false
              if (res.status) {
                if (this.multiPortal) {
                  User.updatePortal({
                    addUserIdList: res.data.id.split(','),
                    id: this.portalId
                  })
                    .then((res) => {
                      if (res.status) {
                        this.$message.success(this.LANG.ADD_SUCCESS)
                        this.cancel()
                        this.$emit('searchUser')
                      }
                    })
                    .catch(() => {})
                } else {
                  this.$message.success(this.LANG.ADD_SUCCESS)
                  this.cancel()
                  this.$emit('searchUser')
                }
              }
            })
            .catch((error) => {
              this.peopleLoading = false
            })
        }
        //表单不合格
        else {
          this.peopleLoading = false
        }
      })
    },
    save() {
      //编辑用户
      this.peopleLoading = true
      switch (this.peopleType) {
        case 'edit': {
          this.editSave()
          break
        }
        case 'add': {
          //新增人员
          this.addSave()
          break
        }
      }
    },
    clearData() {
      this.diffData = {}
      this.addOrgNoList = []
      this.deleteOrgNoList = []
      this.addPostIdList = []
      this.deletePostIdList = []
      this.imageUrl = ''
    },

    //比较表单修改值
    diffDataMethod() {
      this.diffData = {}
      //保存时 比较修改的对象，筛选出修改的值，提交时只需要提交修改的值。
      for (let i in this.rowData) {
        if (i == 'postList') {
          //返回新增内容n
          getAddData(this.form[i], this.rowData[i]).forEach((item) => {
            this.addPostIdList.push(item)
          })
          //返回删除内容o
          getDeleteData(this.form[i], this.rowData[i]).forEach((item) => {
            this.deletePostIdList.push(item)
          })
        } else if (i == 'deptId') {
          if (this.form[i] == this.rowData[i]) {
            this.addOrgNoList = []
            this.deleteOrgNoList = []
          } else {
            this.addOrgNoList.push(this.form[i])
            this.deleteOrgNoList.push(this.rowData[i])
          }
        } else if (this.rowData[i] != this.form[i]) {
          this.diffData[i] = this.form[i]
          delete this.diffData.deptName
          delete this.diffData.orgNo1
          delete this.diffData.orgList
        }
      }
    },
    //照片上传成功的操作
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      //把文件的token赋值,下载的时候需要传token
      this.form.photoToken = res.data.fileToken
    },
    //照片上传之前的操作,检查格式
    beforeAvatarUpload(file) {
      const isJPG = file.type == 'image/jpeg'
      const isPNG = file.type == 'image/png'
      const isBMP = file.type == 'image/bmp'
      const isLt2M = file.size / 1024 / 1024 < 2
      const isLt0k = file.size / 1024 > 0
      if (!isJPG && !isPNG && !isBMP) {
        this.$message.error(this.LANG.STAFF_POHTO_TIP)
      }
      if (!isLt2M) {
        this.$message.error(this.LANG.RULE_PHOTO_BIG)
      }
      if (!isLt0k) {
        this.$message.error(this.LANG.RULE_PHOTO_SMALL)
      }
      return (isJPG || isPNG || isBMP) && isLt2M && isLt0k
    },
    getPhoto(form) {
      if (this.form.photoToken) {
        this.imageUrl =
          this.VUE_APP_DOWNLOAD_IMG_API + '?f8s=' + this.form.photoToken
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .fks-upload-dragger {
  width: 106px;
  height: 140px;
  margin: 0 auto;
  margin-bottom: 16px;
  border: 1px solid #d4d9e0;
  background-color: #fafafa;

  .avatar-uploader-icon {
    display: block;
    margin: 50px 0 0;
    font-size: 24px;
    text-align: center;
    color: #c7c7c7;
  }

  span {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #c7c7c7;
  }
}

::v-deep .file-card {
  width: 106px;
  min-width: 106px !important;
  margin: auto !important;
}

.label {
  margin-top: 4px;
  margin-bottom: 20px;
  margin-left: 8px;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #191919;
}

.viewAvatar {
  width: 106px !important;
  height: 140px !important;
}

.avatar {
  width: 106px;
  height: 140px;
  // margin: 0 auto;
}

.uploadText {
  min-width: 85px;
  margin-right: 8px;
  font-size: 14px;
  line-height: 140px;
  text-align: right;
}

::v-deep .fks-form-item__error {
  width: 352px;
}

.people {
  ::v-deep .fks-dialog__body {
    padding-bottom: 8px;
    overflow-y: auto;
  }
}
@media screen and (max-width: 480px) {
  .left-form {
    flex: 1;
    ~div {
      width: auto !important;
      /deep/ .fks-form-item__label {
        display: none;

      }
      /deep/ .fks-form-item__content {
        margin-left: 0 !important;
      }
    }
  }

}

.photo {
  ::v-deep .fks-form-item__content {
    display: flex;
    justify-content: center;
  }
}
</style>